<template>
  <div class="course-info">
    <div class="course-info-item" v-for="(item,i) in data" :key="i + 'course'">
      <template v-if="type === 1">
        <div class="item-l">
          <span class="num">{{i + 1}}</span>
          <span class="title" :class="{live: item.course_status === 2}">{{item.title}}</span>
          <span class="time">{{item.start_time}}</span>
          <span class="tags" v-if="item.is_audition === 1 && item.video && item.video !== ''" @click="handleVideo(item.video)">免费试看</span>
        </div>
        <div class="item-r" :class="{end: item.course_status === 0,no: item.course_status === 2}">
          <template v-if="item.course_status === 2">未开始</template>
          <template v-if="item.course_status === 0">已学习</template>
        </div>
      </template>
      <template v-if="type === 0">
        <div class="item-l" >
          <span class="num">{{i + 1}}</span>
          <span class="title" :class="{nostart: item.course_status === 0 || item.course_status === 1, ends: item.course_status === 2}">{{item.title}}</span>
          <span class="time">{{item.start_time}}</span>
          <span class="tags" v-if="item.is_audition === 1 && item.video && item.video !== ''" @click="handleVideo(item.video)">免费试看</span>
        </div>
        <div class="item-r" :class="{on: item.course_status === 1,no: item.course_status === 2}">
          <template v-if="item.course_status === 0"><span>未开始</span></template>
          <template v-else-if="item.course_status === 1"><span @click.stop="enterRoom(item)">进入直播</span></template>
          <template v-else><span>已结束</span></template>
        </div>
      </template>
    </div>
    <!-- <videoModal :videoSrc="videoSrc" v-show="isPlay" @closeVideo="handleCloseVideo"/> -->
    <!-- v-if="videoSrc !== ''"  -->
    <!-- <div class="video-box">
      <img src="@/assets/home/close-icon.png" class="close" @click="handleClose" />
    <video :src="videoSrc" controls="controls" width="100%" height="100%" controlsList="nodownload" autoplay />
    </div> -->
  </div>
</template>
<script>
import courseInterval from '@/views/mycourse/courseInterval'
import videoModal from './video-modal'
import { openBrowser } from "@/utils/tools"
export default {
  components: {
    courseInterval,
    videoModal
  },
  props: {
    data: {
      type: Array
    },
    type: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      videoSrc: '',
      isPlay: false
    }
  },
  methods: {
    enterRoom (data) {
      console.log(12344)
      this.$emit('enterRoom', data)
    },
    handleVideo (src) {
      this.videoSrc = src
      this.isPlay = true
      const url = `/#/playCourse?src=${src}`
      openBrowser(url)
    },
    handleCloseVideo (val) {
      this.isPlay = val
    }
  }
}
</script>
<style lang="less" scoped>
.course-info {
  margin-top: 5px;
  &-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid #E8E8E8;
    padding: 0 60px;
    transition: backgroundColor .3s ease-out;
    &:hover {
      background-color: #FAFAFA;
      .title {
        color: #07997F !important;
      }
      .time {
        color: #07997F !important;
      }
    }
    .item-l {
      display: flex;
      align-items: center;
      .num {
        font-size: 26px;
        font-family: SF UI Display;
        font-weight: 400;
        line-height: 31px;
        color: #CCE8E2;
      }
      .live {
        color: #07997F;
      }
      .nostart {
        color: #333;
      }
      .ends {
        color: #C3C3C3;
      }
      .title {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 21px;
        margin-left: 20px;
      }
      .time {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 19px;
        color: #C3C3C3;
        margin-left: 40px;
      }
      .tags {
        display: block;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        width: 88px;
        height: 31px;
        line-height: 29px;
        text-align: center;
        background: #27BFA3;
        border: 1px solid #27BFA3;
        border-radius: 6px;
        margin-left: 30px;
        cursor: pointer;
      }
    }
    .no {
      color: #C3C3C3 !important;
    }
    .end {
      color: #27BFA3 !important;
    }
    .on {
      color: #fff !important;
      background: #27BFA3;
      border-radius: 6px;
    }
    .item-r {
      width: 88px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333;
      cursor: pointer;
      span {
        line-height: 30px;
      }
    }
  }
}
// .video-box {
//   position: fixed;
//   left: 50%;
//   top: 50%;
//   transform: translate(-50%,-50%);
//   width: 80%;
//   height: auto;
//   .close {
//     position: absolute;
//     right: 0;
//     top: -30px;
//     width: 20px;
//     height: 20px;
//     cursor: pointer;
//   }
// }
</style>
